<template>
  <a-form
    ref="formRef"
    :model="formData"
    class="form"
    :label-col-props="{ span: 6 }"
    :wrapper-col-props="{ span: 18 }"
  >
    <a-form-item
      field="activityName"
      :label="$t('stepForm.form.label.activityName')"
    >
      <a-input
        v-model="formData.activityName"
        :placeholder="$t('stepForm.placeholder.activityName')"
      />
    </a-form-item>

    <a-form-item label="upload employee_info">
      <a-upload
        action="http://101.35.43.81:8111/api/upload"
        name="excel_file"
        :data="{ file_type: 'employee_info' }"
        :default-file-list="fileList"
        @success="handleUploadSuccess"
      >
        >
        <!-- <a-button icon="upload">点击上传</a-button> -->
      </a-upload>
    </a-form-item>

    <a-form-item label="upload timesheet data">
      <a-upload
        action="http://101.35.43.81:8111/api/upload"
        name="excel_file"
        :data="{ file_type: 'timesheet' }"
        :default-file-list="fileList1"
        @success="handleUploadSuccess1"
      >
        <a-button icon="upload">点击上传</a-button>
      </a-upload>
    </a-form-item>

    <a-form-item label="upload payroll data">
      <a-upload
        action="http://101.35.43.81:8111/api/upload"
        name="excel_file"
        :data="{ file_type: 'payroll' }"
        :default-file-list="fileList2"
        @success="handleUploadSuccess2"
      >
        <a-button icon="upload">点击上传</a-button>
      </a-upload>
    </a-form-item>

    <a-form-item
      field="promotionTime"
      :label="$t('stepForm.form.label.promotionTime')"
    >
      <a-range-picker v-model="formData.promotionTime" />
    </a-form-item>

    <a-form-item>
      <a-button type="primary" @click="onNextClick">
        {{ $t('stepForm.button.next') }}
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { BaseInfoModel } from '@/api/form';
  import RulesPreset from './rules-preset.vue';

  const uploadResponse = ref({});
  const emits = defineEmits([
    'changeStep',
    'uploadData',
    'uploadData1',
    'uploadData2',
  ]);
  const formRef = ref<FormInstance>();
  const formData = ref<BaseInfoModel>({
    activityName: '',
    channelType: '',
    promotionTime: [],
    promoteLink: 'https://arco.design',
  });

  const fileList1 = [];

  const fileList2 = [];

  const fileList = [];

  const onNextClick = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
      emits('changeStep', 'forward', {
        ...formData.value,
        ...uploadResponse.value,
      });
    }
  };

  const handleUploadSuccess = (fileItem) => {
    // 假设 fileItem 包含 { response, file } 结构
    if (fileItem && fileItem.response) {
      uploadResponse.value = { ...fileItem.response };
      emits('uploadData', uploadResponse.value);
      console.log('Upload success');
    }
  };

  const handleUploadSuccess1 = (fileItem) => {
    // 假设 fileItem 包含 { response, file } 结构
    if (fileItem && fileItem.response) {
      uploadResponse.value = { ...fileItem.response };
      emits('uploadData1', uploadResponse.value);
      console.log('Upload success');
    }
  };

  const handleUploadSuccess2 = (fileItem) => {
    // 假设 fileItem 包含 { response, file } 结构
    if (fileItem && fileItem.response) {
      uploadResponse.value = { ...fileItem.response };
      emits('uploadData2', uploadResponse.value);
      console.log('Upload success');
    }
  };
</script>

<style scoped lang="less">
  .container {
    padding: 20px;
    .keep-margin {
      margin-bottom: 20px;
    }
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    background-color: var(--color-bg-2);
  }

  .steps {
    margin-bottom: 36px;
  }

  .form {
    width: 1000px;
  }

  .form-content {
    padding: 8px 50px 0 30px;
  }
</style>
